<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Range - Custom</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>
  <style>
    .range-part::part(bar) {
      background: red;
    }

    .range-part::part(tick) {
      background: purple;
    }

    .range-part::part(bar-active) {
      background: green;
    }

    .range-part::part(tick-active) {
      background: orange;
    }

    .range-part::part(knob) {
      background: hotpink;
    }

    .ios.range-part::part(pin) {
      background: orange;

      top: -13px;

      height: 20px;

      line-height: 4px;
      border-radius: 4px;

      transform: translate(0, 0, 0);
    }

    .md.range-part::part(pin),
    .md.range-part::part(pin)::before {
      background: orange;
    }
  </style>
  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Range - Custom</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding">
        <ion-range
          class="range-part"
          min="-200"
          max="200"
          step="10"
          snaps="true"
          pin="true"
          dual-knobs="true"
          aria-label="Custom Range"
        ></ion-range>
      </ion-content>
    </ion-app>

    <script>
      const rangePart = document.querySelector('.range-part');
      rangePart.value = {
        lower: '-100',
        upper: '100',
      };
    </script>
  </body>
</html>
